<template>
	<view class="body">
		<!-- 头像 -->
		<view class="userimg" @click="userimgclick">
			<text class="userimgText">头像</text>
			<view class="img1">
				<image style="width: 120rpx; height: 120rpx;border-radius: 200rpx;overflow: hidden;" :src="img"></image>
				<!-- <u-avatar shape="circle" size="60" :src="img">
				</u-avatar> -->
			</view>
		</view>
		<!-- 名称 -->
		<view class="name">
			<text class="nameleft">昵称</text>
			<view class="nametext">
				<u--input placeholder="请输入用户名"  v-model="username" ></u--input>
			</view>
		</view>
		<!-- 性别 -->
		<view class="sex">
			<text class="sextext">性别</text>
			<view class="sexdx">
				<u-radio-group
				    v-model="sex"
				    placement="row"
				    @change="groupChange"
				  >	
				    <u-radio
				      :customStyle="{marginBottom: '8px', marginLeft: '40rpx'}"
				      v-for="(item, index) in radiolist1"
				      :key="index"
				      :label="item.name"
				      :name="item.name"
				    >
				    </u-radio>
				  </u-radio-group>
			</view>
		</view>
		<view class="phone">
			<text class="phoneleft">手机号</text>
			<view class="phonetext">
				<u--input placeholder="请输入手机号" v-model="phone">123</u--input>
			</view>
		</view>
		<view class="button" @click="update">
			<text>修  改</text>
		</view>
	</view>
</template>

<script>
	import {uploadImgToOss,deleteImg} from "../static/service/aliyoss/config.js"
	import upload from "../uni_modules/uview-plus/libs/config/props/upload.js"
	import {http} from "../static/service/requestAddress/rtas.js"
	const app = getApp()
	export default{
		data(){
			return{
				sex:"",
				username:"",
				phone:"",
				img:"",
				radiolist1: [
					{
						name: '男生',
						disabled: false
					},
					{
						name: '女生',
						disabled: false
					},
				],
				imagesList:[],//图片数组
				oldimglist:[],//上次的图片
				receiveImgList:"",//上传图片返回的链接
			}
		},
		onShow(){
			if(uni.getStorageSync("user")){
				var user = JSON.parse(uni.getStorageSync("user"))
				if(user.sex == 0){
					this.sex = "女生"
				}else{
					this.sex = "男生"
				}
				this.phone = user.phone
				this.username = user.name
				this.img = user.img
			}else{
				uni.$u.toast("登录后才能修改设置喔")
			}
			
			
		},
		methods:{
			// 获取图片
			userimgclick() {
				uni.$emit("uploadimg",false)
				var urlt 
				var that = this
				var promise = new Promise(function(resolve,reject){
					if(that.imagesList.length <= 1){
						uni.chooseImage({
							count: 1, // 默认最多一次选择8张图
							sourceType: ['album', 'camera'], //图片来源
							success: res => {
								// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
								var tempFilePaths = res.tempFilePaths;
								//支持多图上传
								var falge = false//是否有不合法数据格式标记
								for (var i = 0; i < res.tempFilePaths.length; i++) {
									//对上传的图片校验
									var str = tempFilePaths[i].slice(tempFilePaths[i].length - 3,tempFilePaths[i].length)
									var strhz = ["jpg","png","gif"]
									var T = strhz.indexOf(str)
									if(T == -1){
										falge = true
										continue
									}
									if(that.imagesList.length <= 1){
										//显示消息提示框
										uni.showLoading({
											mask: true
										})
										if(that.imagesList.length > 0){
											that.imagesList[0] = tempFilePaths[0]
										}else{
											that.imagesList.push(tempFilePaths[0])
										}
									}else{
										uni.$u.toast("头像只能上传1张！")
										break
									}
								}
									uni.hideLoading();
									if(falge){
										uni.$u.toast("获取成功，以过滤格式不正确图片！")
									}
									uni.$u.toast("图片获取成功！")
									resolve()
							}
						})
					}else{
						uni.$u.toast("头像只能上传1张！")
					}
				})
				promise.then(res=>{
					that.upload()
					setTimeout(function(){
						uni.$emit("uploadimg",true)
					},500)
				})
				//上传图片到阿里云
			},
			groupChange(n) {
			},
			//修改用户信息
			update(){
				var T = 0
				var img = ""
				//条件检查
				if(this.username.length > 8){
					uni.$u.toast("用户名不能超过8个字符")
					return
				}
				let str = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/
				if(! str.test(this.phone)){
					uni.$u.toast("手机号格式不正确")
					return
				}
				if(this.sex == "男生"){
					T = 1
				}
				if(this.oldimglist.length == 0){
					img = this.img
				}else{
					img = this.oldimglist[0]
				}
				var userinfo = JSON.parse(uni.getStorageSync("user"))
				var user = {
					id:userinfo.id,
					name:this.username,
					sex: T,
					img:img,
					phone:this.phone,
				}
				//发送请求
				uni.request({
					url:http+"user/updateuserinfo",
					method:"PUT",
					data:user,
					complete:(res)=>{
						if(res.data.code == 20041){
							//更新缓存
							 userinfo.name = this.username
							 userinfo.img = this.img
							 userinfo.sex = T
							 userinfo.phone = this.phone
							 uni.setStorageSync("user",JSON.stringify(userinfo))
							 uni.$u.toast("修改成功")
						}else{
							uni.$u.toast("修改失败")
						}
					}
				})
			},
			async upload(){
				var path = "用户头像"//上传图片到oss的文件名
				var T = 0
				if(this.oldimglist.length > 0){
					T = await deleteImg(this.oldimglist[0])
				} 
				this.receiveImgList= await uploadImgToOss(this.imagesList,path)
				this.imagesList[0] = this.receiveImgList
				this.oldimglist[0] = this.imagesList[0]
				this.img = this.oldimglist[0]
			},
		}
	}
</script>

<style scoped>
	@import url("../static/css/componentsCss/userSet/userSetindex.css");
</style>